<template>
  <!-- 文件展示 -->
  <div class="show-file" v-if="materialList && materialList[0]">
    <div class="file-pic" v-if="materialList[0].mediaType === '0'">
      <van-image
        width="32%"
        height="32%"
        radius="8px"
        fit="cover"
        :src="item.materialUrl"
        class="file-pic-item"
        v-for="(item, index) in materialList"
        :key="index"
      />
    </div>
    <!-- 图文 -->
    <div class="file-other" v-if="materialList[0].mediaType === '9'" @click="preview($event, materialList[0].id)">
      <van-image
        width="40px"
        height="40px"
        radius="8px"
        fit="cover"
        :src="materialList[0].coverUrl"
        v-if="materialList[0].coverUrl"
      />
      <div class="icon-style" v-else>
        <svg-icon class="icon-style" name="imgText"></svg-icon>
      </div>
      <div class="file-other-content">
        <div class="other-title">{{ materialList[0].materialName }}</div>
        <div class="other-content">
          {{ materialList[0].content }}
        </div>
      </div>
    </div>
    <!-- 文章 -->
    <div class="file-other" v-if="materialList[0].mediaType === '12'" @click="preview($event, materialList[0].id)">
      <van-image
        width="40px"
        height="40px"
        radius="8px"
        fit="cover"
        :src="materialList[0].coverUrl"
        v-if="materialList[0].coverUrl"
      />
      <div class="icon-style" v-else>
        <svg-icon class="icon-style" name="article"></svg-icon>
      </div>
      <div class="file-other-content">
        <div class="other-title">{{ materialList[0].materialName }}</div>
        <div class="other-content">
          {{ materialList[0].digest }}
        </div>
      </div>
    </div>
    <!-- 视频 -->
    <div class="file-other" v-if="materialList[0].mediaType === '2'" @click="preview($event, materialList[0].id)">
      <van-image width="40px" height="40px" radius="8px" fit="cover" :src="materialList[0].coverUrl" />
      <div class="file-other-content">
        <div class="other-title">{{ materialList[0].materialName }}</div>
        <div class="other-content">
          {{ materialList[0].digest }}
        </div>
      </div>
    </div>
    <!-- 海报 -->
    <div class="file-other" v-if="materialList[0].mediaType === '5'" @click="preview($event, materialList[0].id)">
      <van-image
        width="40px"
        height="40px"
        radius="8px"
        fit="cover"
        :src="materialList[0].materialUrl"
        v-if="materialList[0].materialUrl"
      />
      <div class="icon-style" v-else>
        <svg-icon class="icon-style" name="pic"></svg-icon>
      </div>
      <div class="file-other-content">
        <div class="other-title">{{ materialList[0].materialName }}</div>
        <div class="other-content">
          {{ materialList[0].digest }}
        </div>
      </div>
    </div>
    <!-- 文件 -->
    <div
      class="file-other"
      v-if="materialList[0].mediaType === '3'"
      @click="goLink($event, materialList[0].materialUrl)"
    >
      <div v-if="materialList[0].materialUrl" class="icon-style">
        <svg-icon
          class="icon-style"
          :name="materialList[0].materialUrl ? filType(materialList[0].materialUrl) : ''"
        ></svg-icon>
      </div>
      <div class="file-other-content">
        <div class="other-title">{{ materialList[0].materialName }}</div>
        <div class="other-content">
          {{ materialList[0].digest }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    materialList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    filType(file) {
      let filecontent = JSON.parse(JSON.stringify(file))
      filecontent = filecontent.split('.')
      let type = filecontent[filecontent.length - 1]
      if (type === 'pdf') {
        return 'pdf'
      } else if (['doc', 'docx'].includes(type)) {
        return 'word'
      } else if (['ppt', 'pptx', 'pps', 'pptsx'].includes(type)) {
        return 'ppt'
      } else {
        return ''
      }
    },
    preview(e, id) {
      e.stopPropagation()
      if (id !== '0' && id !== '4') {
        this.$router.push({
          name: 'metrialDetail',
          query: {
            materiaId: id,
            isBack: true,
          },
        })
      }
    },
    goLink(e, url) {
      e.stopPropagation()
      window.open(url)
    },
  },
}
</script>

<style lang="less" scoped>
.show-file {
  width: 100%;
  .file-other {
    padding: 16px;
    width: 100%;
    height: 78px;
    background: #f2f3f5;
    border-radius: 16px 16px 16px 16px;
    display: flex;
    align-items: center;
    .file-other-content {
      width: calc(100% - 56px);
      margin-left: 8px;
      .other-title {
        width: 100%;
        font-size: 15px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #1d2129;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .other-content {
        width: 100%;
        height: 22px;
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #86909c;
        line-height: 22px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .file-pic {
    .file-pic-item {
      margin-right: 4px;
      margin-bottom: 4px;
    }
  }
}
.icon-style {
  width: 40px;
  height: 40px;
}
</style>
